<template>
  <div class="app-container">
    <!--查询表单-->
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item label="负责人">
        <el-select
          v-model="searchCondition.accountId"
          placeholder="请选择"
          clearable
          @focus="loadAllEmp"
        >
          <el-option
            v-for="account in accounts"
            :key="account.id"
            :label="account.name"
            :value="account.id"
          ></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="开始日期">
        <el-date-picker
          v-model="searchCondition.startDate"
          value-format="yyyy-MM-dd"
          type="date"
          style="width: 160px"
          placeholder="统计开始日期"
          @change="fetchData()"
        ></el-date-picker>
      </el-form-item>
      <el-form-item label="结束日期">
        <el-date-picker
          v-model="searchCondition.endDate"
          value-format="yyyy-MM-dd"
          type="date"
          style="width: 160px"
          placeholder="统计结束日期"
          @change="fetchData()"
        ></el-date-picker>
      </el-form-item>
      <el-button type="primary" icon="el-icon-search" @click="fetchData()">
        查询
      </el-button>
      <el-button type="default" @click="resetData()">清空</el-button>
    </el-form>

    <!-- 列表 -->
    <el-table :data="list" border stripe>
      <el-table-column
        prop="accountId"
        label="云效账号"
        align="center"
        width="170"
      />
      <el-table-column
        prop="accountName"
        label="负责人姓名"
        align="center"
        width="165"
      />
      <el-table-column prop="confirmCount" label="待确认数量" align="center"/>
      <el-table-column prop="reopenCount" label="重新打开数量" align="center"/>
      <el-table-column
        prop="processingCount"
        label="处理中数量"
        align="center"
      />
      <el-table-column prop="fixedCount" label="已修复数量" align="center"/>
      <el-table-column prop="closedCount" label="已关闭数量" align="center"/>
      <el-table-column prop="canceledCount" label="已取消数量" align="center"/>
      <el-table-column prop="invalidCount" label="无效/重复数" align="center"/>
      <el-table-column prop="otherCount" label="其他数量" align="center"/>
      <el-table-column prop="totalCount" label="总数量" align="center"/>
      <el-table-column prop="effectiveCount" label="有效缺陷数量" align="center"/>

      <el-table-column label="操作" align="center" width="150">
        <template slot-scope="scope">
          <el-button
            type="primary"
            size="mini"
            icon="el-icon-pie-chart"
            @click="showReportPage(scope.row.accountId, scope.row.accountName)"
          >
            查看报表
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import bugApi from '@/api/core/bug'

export default {
  data() {
    return {
      list: null,
      total: 0,
      searchCondition: {
        accountId: '',
        startDate: '',
        endDate: '',
      },
      accounts: [],
    }
  },
  created() {
    this.searchCondition.startDate = this.getOneMonthAgoDate();
    this.searchCondition.endDate = this.getTodayDate();
    this.fetchData()
  },

  methods: {
    getFormattedDate(date) {
      // alert('format:' + date)
      if (!date || !date.getTime || isNaN(date.getTime())) {
        return ''
      }
      const year = date.getFullYear()
      const month = String(date.getMonth() + 1).padStart(2, '0')
      const day = String(date.getDate()).padStart(2, '0')
      // const hours = String(now.getHours()).padStart(2, '0')
      // const minutes = String(now.getMinutes()).padStart(2, '0')
      // const seconds = String(now.getSeconds()).padStart(2, '0')
      const formattedTime = `${year}-${month}-${day}`
      return formattedTime
    },

    getOneMonthAgoDate() {
      const date = new Date()
      date.setMonth(date.getMonth() - 1)
      return date.toISOString().split('T')[0];
    },

    getTodayDate() {
      // 2024-11-14T10:51:08.199Z
      // alert(new Date().toISOString())
      return new Date().toISOString().split('T')[0];
    },

    showReportPage(id, name) {
      const postData = {}
      postData.accountId = id
      postData.accountName = name
      postData.startDate = this.searchCondition.startDate
      postData.endDate = this.searchCondition.endDate

      // alert(
      //   postData.accountId +
      //   '---' +
      //   postData.accountName +
      //   '--开始-' +
      //   postData.startDate +
      //   '--结束-' +
      //   postData.endDate
      // )

      this.$router.push({
        path: '/core/bug/devChart',
        query: postData,
      })
    },
    loadAllEmp() {
      bugApi
        .getEmpList()
        .then((response) => {
          this.accounts = response.data
        })
        .catch((error) => {
          console.error('获取账户列表失败', error)
        })
    },

    fetchData() {
      if (this.searchCondition.startDate > this.searchCondition.endDate) {
        // 交换开始日期和结束日期
        [this.searchCondition.startDate, this.searchCondition.endDate] = [this.searchCondition.endDate, this.searchCondition.startDate];
      }
      bugApi.getBugList(this.searchCondition).then((response) => {
        this.list = response.data
      })
    },

    resetData() {
      this.searchCondition = {}
      this.fetchData()
    },
    validateDateRange() {
      if (
        this.searchCondition.startDate &&
        this.searchCondition.endDate &&
        this.searchCondition.startDate > this.searchCondition.endDate
      ) {
        this.$message.warning('开始日期不能晚于结束日期')
        this.searchCondition.startDate = ''
      }
    },
  },
}
</script>
